<template>
  <div>
   <my-table :arr="arr">
    <template #to>
     <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
        <slot name="header"></slot>
      </tr>
         
    </template>

    <template #body="{i,e}">
        <td>{{e+1}}</td>
        <td>{{i.goods_name}}</td>
        <td>{{i.goods_price}}</td>
        <td>
       <input
           @blur="yy(i)"
          type="text"
          v-if="i.inputVisible"
          />
          <button 
          v-else
          style="display: block;" 
          class="btn btn-primary btn-sm add-tag"
          @click="show(i)"
         
          >+Tag</button>

        <span class="boxx">{{i.tags.map(i => i).join(' ')}}</span>
         
       
      
        <td><button class="btn btn-danger btn-sm" @click='add(i.id)'>删除</button></td>
      
        
    </template>
   </my-table>
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.css"
import axios from "axios";
import MyTable from '@/components/MyTable.vue';
axios.defaults.baseURL = "https://www.escook.cn";
export default {
 data(){
   return{
    is:false,
    arr:[]
   }
 },
 methods:{
    add(id){
       console.log(id);
       this.arr = this.arr.filter(i => i.id !== id  )
    },
    show(i){
       i.inputVisible=true
    },
    yy(i){
        i.inputVisible=false
    }
    
    }
 ,

  components: { MyTable },
   async created(){
   const res = await axios.get('https://www.escook.cn/api/goods')
//    console.log(res.data.data);
   this.arr = res.data.data
   console.log(this.arr);
//    this.$emit('arr',this.arr)
 }
}
</script>

<style>
 .boxx{
    font-weight: 580;
    background-color: yellow;
    margin-left: 10px;
    border-radius: 5px;
    font-size: 20px;
    color: black;
    display: inline-block;
    text-align: center;
    width: 80px;
    height: 30px;
    line-height: 30px;
    
    

 }
</style>